import {memo, useState, useMemo, useCallback} from 'react';

const Child = ({name, onClick, count}) => {
    console.log('子组件渲染');
    return (
        <div className="border">
            <p className="title">Demo--useMemo--2--child</p>
            <p style={{color: name.color}}>这是一个子组件： 接收父组件传递过来的name: {name.value}</p>
            <p>这是一个子组件： 接收父组件传递过来的count: {count}</p>
            <button onClick={onClick.bind(null, '子组件新的name')}>改变子组件name</button>
        </div>
    )
}

const ChildMemo = memo(Child);

const Demo = (props) => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('Child组件')
    return (
        <div className="border">
            <p className='title'>Demo--useMemo--2--Parent</p>
            <h1>父组件Count: {count}</h1>
            <button onClick={(e) => setCount(count + 1)}>add</button>
            <ChildMemo
                name={
                    useMemo(() => ({
                        value: name,
                        color: name.indexOf('name') !== -1 ? 'red' : 'green',
                    }), [name])
                }
                count={count}
                onClick={useCallback((newName) => setName(newName), [name])}
            ></ChildMemo>
        </div>
    )
}

export default Demo;